/**
 * 页面的搜索 表格 分页 复用
 * 多个页面都需要搜索 表格 分页 复用
 * 封装一个组件
 *     1：分析哪些是重复的 哪些是变化的
 *     2：把重复的抽离出来 变化的通过插槽传递进去
 *     3：把变化的通过props传递进去
 *         
 *          分析：
 *              1 重复的是逻辑
 *              2 变化的是:请求的接口  搜索参数
 *              3 对外提供一个方法
 *              4 传递一个函数
 */

import { reactive, ref, toRefs } from 'vue';
/**
 * 封装的表格快速使用的hook
 * 
 * @param fn  要向服务器发送的api请求函数
 * @param searchParams  搜索的参数
 * @returns 
 */

//类型约束 一个函数 然后传入  约束死必须要有这两个值
type paginationParams = {
    pageNum: number;
    pageSize: number;
}
//泛型  T是传入的参数 后端返回的数据类型
type dataParams = {
    data: {
        list: any[];
        total: number;

    },
    code: number
    info: string

}


export default function useUserTable<
    T extends dataParams,  //后端返回的数据类型 
    P extends paginationParams>  //传入的api请求函数
    (fn:(params: P) => RES<T>, //传入的请求函数  fn对传入的参数要求是一个对象  T就是data数据
    searchParams?: Object) {     //传入的搜索参数
    //固定部分  分页的参数   响应社数据
    const params = reactive({
        pageNum: 1,
        pageSize: 10,

    });

    //渲染响应式数据
    const list = ref<(dataParams)[]>([]);   //这里的值要给到上面的T 类型约束要一样
    const total = ref(0);
    //为了一开始让页面就有数据
    const fetch = () =>{
        fn({...(params as P),...searchParams}).then(res=>{
            if(res.data.code===200){
                //成功后数据处理 保存数组
                list.value = res.data.data.list;
                console.log("这里是获取后端的list数据",res.data.data.list);
                //保存总数
                total.value = res.data.data.total;
            }
        });
    };
    fetch();

    //准备几个不同的函数 让外面在不同情况下调用
    //每页条数改变
    const pageChangeHandle = () => {
        //如果还想实现其他功能 可以在这里添加
        fetch();
    }
    //页码改变
    const pageSizeChangeHandle = () => {
        fetch();
    };
    //搜索功能
    const searchHandle = () => {
        fetch();
    };

    //使用的组件直接导入就用 比如middleware.vue 里面就可以用 
    return {
        list,
        ...toRefs(params),
        total,
        pageChangeHandle,
        pageSizeChangeHandle,
        searchHandle,
    };
}